<template>
  <h1>v-bind 绑定属性</h1>
  <!--
  语法：
   v-bind:属性名="值"
   简写：
    :属性名="值"
 -->
  <a v-bind:href="aurl">点击去京东M站</a>
  <img v-bind:src="imgsrc" alt="" width="80" height="80">
  <a :href="aurl"><img v-bind:src="imgsrc" alt="" width="80" height="80"></a>
  <hr>
  <p v-bind:id="id">v-bind的绑定文本</p>
  <button @click="id = 'd2'">点击改变选择器的样式</button>
  <button @click="onClick">函数转变id的值</button>

</template>

<script setup>
import { ref } from 'vue';

const aurl = "http://m.jd.com"
const imgsrc = "https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/275955/18/23661/93552/68037da3Fb44ff413/33a44d780392fc68.jpg"

const id=ref("d1")
function onClick() { 
  //ref 响应式赋值 需要采用 .value 来赋值
  id.value = "d2"
}
</script>

<style scoped>
#d1{
  color: red;
}
#d2{
  color: white;
  background-color: black;
}
</style>